<template>
  <div id="ChannelProvider">
      <ul class="top">
        <li>{{$t('CompanyProfile.ChannelProvider')}}</li>
        <li class="line">——</li>
      </ul>
      <div class="content">
        <ul :style="'width:'+ulWidth+'px'" v-for="(list,index) in info" :key="index"
            :class="setLine(index)" @click="goOtherPage(list.link)">
          <img :src="list.img_src" height="40" :style="'max-width:'+ulWidth+'px'">
        </ul>
      </div>
    <div class="fillLine"></div>
  </div>
</template>

<script>
    export default {
        name: "ChannelProvider",
      props:{
        info:{},
        ulWidth:Number,
      },
      methods:{
          goOtherPage(link){
            window.open('http://'+link);
          },
          setLine(index){
            if(index<3){
              return 'rightBottomLine';
            }
            if(index>3&&index<7){
              return 'rightLine';
            }
            if(index==3){
              return 'bottomLine';
            }
          }
      }
    }
</script>

<style scoped>
#ChannelProvider{
  background: #FFF;
  overflow: hidden;
}
#ChannelProvider .top{
  margin-top: 30px;
  margin-bottom: 5px;
}
.line{
  color:#f5f5f5;
}
#ChannelProvider ul{}
  .content ul{
    float:left;
  }
.content ul:last-child{
  padding-top:10px;
}
.content:after{
  clear:both;
}
  .rightBottomLine{
    border-right: 1px solid #f5f5f5;
    border-bottom:1px solid #f5f5f5;
    margin-bottom: 0;
    padding-bottom: 10px;
    margin-top: 10px;
  }
  .bottomLine{
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 0;
    padding-bottom: 10px;
    margin-top: 10px;
  }
  .rightLine{
    border-right: 1px solid #f5f5f5;
    margin-bottom: 10px;
    padding-top:10px;
  }
</style>
